﻿#page-wraper {
  padding-top: 2rem; }

#dlv-view > .title {
  height: 8rem; }

#dlv-view > .info {
  margin-top: 1rem; }
  #dlv-view > .info > div {
    padding-left: 6rem;
    padding-right: 5px; }
  #dlv-view > .info > div:last-of-type {
    padding-right: 13.5rem; }

@media only print {
  #dlv-papers {
    color: black; }
  #dlv-view {
    display: none; }
  #paper-slct {
    display: none; } }

#paper-slct {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(130, 130, 130, 0.7);
  display: none; }
  #paper-slct > div {
    height: 100%;
    width: auto;
    display: table;
    margin: 0 auto; }
    #paper-slct > div > div {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      margin: 0 auto; }
      #paper-slct > div > div > div > h1 {
        color: white; }
      #paper-slct > div > div > div > .paper-type {
        display: inline-block;
        width: 220px;
        height: 220px;
        margin: 20px;
        box-shadow: 0 0 5px 0 black;
        cursor: pointer;
        transition: all linear .5s;
        background-color: white;
        text-align: center; }
        #paper-slct > div > div > div > .paper-type > img {
          width: 140px;
          height: 140px;
          margin: 10px auto; }
        #paper-slct > div > div > div > .paper-type:hover {
          background-color: #3caed4;
          transform: translateY(-10px); }
      #paper-slct > div > div > div > .action-bar {
        text-align: right;
        padding-right: 25px; }

.field-title {
  font-weight: bolder;
  position: absolute;
  left: 0; }

#dlv-qr {
  width: 12rem;
  height: 12rem;
  position: absolute;
  right: 5px;
  top: 5px; }
  #dlv-qr > img {
    width: 100%;
    height: 100%; }

#site-logo {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 6rem;
  height: 6rem;
  background-image: url("/ui/imgs/vi/logo.jpg");
  background-size: cover; }

#clnt-logo {
  position: absolute;
  left: 8rem;
  top: 1rem;
  width: 6rem;
  height: 6rem;
  background-size: cover; }

.supplier-title {
  text-align: center;
  height: 4rem;
  line-height: 4rem; }

#dlv-items {
  margin-top: 1rem; }
  #dlv-items > thead > tr {
    background-color: #f4f5f9 !important; }
  #dlv-items > tbody > tr {
    background-color: white !important; }

.idx {
  width: 2%; }

.name {
  width: 8%; }

.brand {
  width: 7%; }

.model {
  width: 20%; }

.spec {
  width: 20%; }

.ord-count {
  width: 12%; }

.dlv-count {
  width: 12%; }

.rcv-count {
  width: 8%; }

.signs {
  line-height: 3rem; }

.end {
  margin-top: 1rem;
  text-align: right; }

#dlv-papers {
  display: none; }

@media only print {
  html {
    font-size: 2.6mm;
    height: auto; }
  body {
    height: auto; }
  @page {
    margin: 4mm 4mm 4mm 4mm; }
  #page-wraper {
    padding-top: 2mm !important;
    width: 100% !important; }
  #dlv-papers {
    display: block;
    margin: 0; }
  .paper {
    page-break-after: always; }
    .paper:last-of-type {
      page-break-after: avoid; }
  .c-form {
    width: 200mm;
    margin: 0 auto; }
    .c-form > .info {
      margin-top: 2mm; }
      .c-form > .info > div {
        padding-left: 16mm;
        padding-right: 1mm; }
      .c-form > .info > div:last-of-type {
        padding-right: 0; }
    .c-form .supplier-title {
      text-align: center;
      height: 4mm;
      line-height: 4mm;
      margin-bottom: 1mm; }
    .c-form > #dlv-qr-copy {
      width: 34mm;
      height: 34mm;
      position: absolute;
      right: 1mm;
      top: 1mm; }
      .c-form > #dlv-qr-copy > img {
        width: 100%;
        height: 100%; }
    .c-form .idx {
      width: 3%; }
    .c-form .name {
      width: 10%; }
    .c-form .brand {
      width: 10%; }
    .c-form .model {
      width: 18%; }
    .c-form .spec {
      width: 18%; }
    .c-form .ord-count {
      width: 12%; }
    .c-form .dlv-count {
      width: 10%; }
    .c-form .rcv-count {
      width: 10%; }
  .a4 {
    width: 210mm;
    margin: 2mm 2mm auto; }
    .a4 > .info {
      margin-top: 2mm; }
      .a4 > .info > div {
        padding-left: 16mm;
        padding-right: 1mm; }
      .a4 > .info > div:last-of-type {
        padding-right: 0; }
    .a4 .supplier-title {
      text-align: center;
      height: 4mm;
      line-height: 4mm;
      margin-bottom: 1mm; }
    .a4 > #dlv-qr-copy {
      width: 34mm;
      height: 34mm;
      position: absolute;
      right: 1mm;
      top: 1mm; }
      .a4 > #dlv-qr-copy > img {
        width: 100%;
        height: 100%; }
    .a4 .idx {
      width: 3%; }
    .a4 .name {
      width: 10%; }
    .a4 .brand {
      width: 10%; }
    .a4 .model {
      width: 18%; }
    .a4 .spec {
      width: 18%; }
    .a4 .ord-count {
      width: 12%; }
    .a4 .dlv-count {
      width: 10%; }
    .a4 .rcv-count {
      width: 10%; } }
